<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file = "/WEB-INF/jsp/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="../internal.js"></script>
    <script src="<%=basePath%>js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="template.css"/>
    <script>
    	$(function(){
    		$.post('<%=basePath%>js/ueditor/dialogs/template/proxy.jsp',function(json){
    			(function () {
    			    var me = editor,
    			            preview = $G( "preview" ),
    			            preitem = $G( "preitem" ),
    			            tmps = json,
    			            currentTmp;
    			    var initPre = function () {
    			        var str = "";
    			        for ( var i = 0, tmp; tmp = tmps[i++]; ) {
    			            str += '<div class="preitem" onclick="pre(' + i + ')"><img src="' + "images/" + tmp.pre + '" ' + (tmp.title ? "alt=" + tmp.title + " title=" + tmp.title + "" : "") + '></div>';
    			        }
    			        preitem.innerHTML = str;
    			    };
    			    var pre = function ( n ) {
    			        var tmp = tmps[n - 1];
    			        currentTmp = tmp;
    			        clearItem();
    			        domUtils.setStyles( preitem.childNodes[n - 1], {
    			            "background-color":"lemonChiffon",
    			            "border":"#ccc 1px solid"
    			        } );
    			        preview.innerHTML = tmp.preHtml ? tmp.preHtml : "";
    			    };
    			    var clearItem = function () {
    			        var items = preitem.children;
    			        for ( var i = 0, item; item = items[i++]; ) {
    			            domUtils.setStyles( item, {
    			                "background-color":"",
    			                "border":"white 1px solid"
    			            } );
    			        }
    			    };
    			    dialog.onok = function () {
    			        if ( !$G( "issave" ).checked ){
    			            me.execCommand( "cleardoc" );
    			        }
    			        var obj = {
    			            html:currentTmp && currentTmp.html
    			        };
    			        me.execCommand( "template", obj );
    			    };
    			    initPre();
    			    window.pre = pre;
    			    pre(2)

    			})();
    		},'json');
    	})
    </script>
</head>
<body>
    <div class="wrap">
        <div class="left">
            <div class="top">
                <label><var id="lang_template_clear"></var>：<input id="issave" type="checkbox"></label>
            </div>
            <div class="bottom border_style1" id="preview"></div>
        </div>
        <fieldset  class="right border_style1">
            <legend><var id="lang_template_select"></var></legend>
            <div class="pre" id="preitem"></div>
        </fieldset>
        <div class="clear"></div>
    </div>
   
</body>
</html>
